<!--加仓-多币对-->
<template>
  <div class="bg bbg1">

    <div class="bg" v-if="pairMap">

      <text class="font24 text2 title">{{pairMap.apiName}}</text>
    
      <!--投入资金-->
      <LInput class="invest" v-model="investCoinnNum" :title="T('加仓数量')" :limits="T('范围')+' '+minInvest+'~'+maxInvest" :tips="T('加仓数量')" :unit="pairMap.investCoin" @input="onInput"></LInput>
      
      <!--滑动条-->
      <WeexSlideBar1 class="slide" ref='WeexSlideBar' @slideChange="slideChange"></WeexSlideBar1>

      <text class="money font24 text3">{{T('可用')+' '+moneyNum+' '+pairMap.investCoin}}</text>

      <div class="but main1" @click="addClick">
        <text class="font32 text1">{{T('加仓')}}</text>
      </div>

    </div>
  </div>
</template>

<script>

//组件
import LInput from "@/public/view/LInput.vue";

//功能
import navigator from "@/_js/navigator";
import modal from '@/_js/modal';
import math from '@/_js/math';
import amStrategy2 from "@/strategy/amStrategy2";
import broadcast from '@/_js/broadcast';
import API from '@/_js/api';

const globalEvent = weex.requireModule('globalEvent');
const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("加仓"));

export default {

  components: {
    LInput,
  },

  data() {
    return {
      T:T,
      executeId:'', 
      configMap:undefined, //执行配置
      states:undefined, //执行状态
      limitMap:undefined, //限制配置
      pairMap:undefined, //交易对
      sonExexuteIds:undefined, //多币对id数组

      api:undefined,

      target:false, //投资方向：turn交易币 false本币
      minInvest:'0', //最小投入
      maxInvest:'0', //最大投入

      investCoinnNum:'', //投入数量
      moneyNum:'0', //可用余额
    };
  },

  mounted() {

    this.api = navigator.getParam('api');
    this.executeId = navigator.getParam('executeId');
    this.configMap = navigator.getParam('configMap');
    this.states = navigator.getParam('states');
    this.limitMap = navigator.getParam('limitMap');
    this.sonExexuteIds = navigator.getParam('sonExexuteIds');

    var pairMap = this.configMap.tradePairs[0];
    this.target = (pairMap.investCoin == pairMap.counterCoin);
    this.httpQuerySinglePair(pairMap);


    //Api更新通知
    var self = this;
    globalEvent.addEventListener("apiUp",(e)=>{
      if (self.api.apiId == '') {
        return;
      }
      API.getApi(self.api.apiId, 'YES', (api)=>{
        self.api = api;
        self.upApiMoney();
        self.upSlideBar();
      });
    });
    API.synchroCoin(this.api.apiId, pairMap.investCoin);
  },

  methods: {


    /********************************** http*/
    //http交易对信息
    httpQuerySinglePair(pairMap) {

      modal.showLoad();
      var param = {exchangeId: pairMap.exchangeId,
                  counterCoinId: pairMap.counterCoinId,
                  baseCoinId: pairMap.baseCoinId};
      weexHttp.post("quoteV3/querySinglePair",param,true,(data) => {
          modal.hideLoad();
          if (data.status == 200) {
            data = data.data;
            this.pairMap = Object.assign(pairMap, data);
            this.pairMap['baseCoinUsdPrice'] =  math.chu(this.pairMap.usdPrice, this.pairMap.last, math.getNumber(this.pairMap.baseCoinDecimal));
            this.upInvestLimit();
            this.upApiMoney();
            setTimeout(() => { //滑条未绘制，延时刷新
              this.upSlideBar();
            }, 200);
          } else {
            modal.toast(data.msg);
          }
        }
      );
    },
  
    /********************************** 更新*/
    //更新投入限制
    upInvestLimit() {
      
      //保留位数
      var xiaoshu = this.getXiaoshu();

      var minInvest = this.limitMap.minInvest;

      var maxInvest = this.limitMap.maxInvest;

      //折合
      if (this.pairMap.investCoin != 'USDT' && this.target) {
        minInvest = math.chu(minInvest, this.pairMap.usdPrice);
        maxInvest = math.chu(maxInvest, this.pairMap.usdPrice);
      } else if (this.pairMap.investCoin != 'USDT') {
        minInvest = math.chu(minInvest, this.pairMap.baseCoinUsdPrice);
        maxInvest = math.chu(maxInvest, this.pairMap.baseCoinUsdPrice);
      }
      
      minInvest = math.jian(minInvest, this.pairMap.investCoinnNum, xiaoshu, 2);
      this.minInvest = math.getNumber(minInvest) < 0 ? '0' : minInvest;

      maxInvest = math.jian(maxInvest, this.pairMap.investCoinnNum, xiaoshu, 2);
      this.maxInvest = math.getNumber(maxInvest) < 0 ? '0' : maxInvest;

      if (math.getNumber(this.maxInvest) == 0) {
        var parm = {'message':T('已达到最大可投入金额，无法加仓。'), 
                    'btn':T('退出')};
        modal.alert(parm,(bool)=>{
          navigator.back();
        });
      }
    },

    //更新可用数量
    upApiMoney() {
      
      //保留位数
      var xiaoshu = this.getXiaoshu();

      var num =  '0';
      if (this.api == null) {
        num = this.maxInvest;
      } else {

        for (let index = 0; index < this.api.accountAssets.length; index++) {
          var assets = this.api.accountAssets[index];
          if (assets.currency == this.pairMap.investCoin) {
            num = math.xiaoshu(assets.availableReal, xiaoshu, 2);
            break;
          }
        }
      }
      this.moneyNum = math.getNumber(num) < 0 ? '0' : num;
    },

    //更新滑条
    upSlideBar(){
      
      var starStr = '0';
      var endStr = math.getNumber(this.maxInvest) > math.getNumber(this.moneyNum) ? this.moneyNum : this.maxInvest;
      endStr = endStr +'';
      
      var ratio = this.investCoinnNum.length ? math.chu(this.investCoinnNum, endStr, 2, 2) : '0';
      ratio = math.getNumber(ratio) > 1 ? '1' : ratio;
      ratio = math.getNumber(endStr) == 0 ? 0 : ratio;

      var a = {'starStr':starStr, 'endStr':endStr, 'ratio':ratio};
      
      this.$refs.WeexSlideBar.upSlide(a);
    },

    /********************************** GET*/
    //获取保留小数位
    getXiaoshu() {
      var xiaoshu = this.target ? this.pairMap.counterCoinDecimal : this.pairMap.baseCoinDecimal;
      xiaoshu = math.getNumber(xiaoshu);
      return xiaoshu;
    },

    /********************************** 代理回调*/
    //总投入资金-输入改变
    onInput(e){
      this.upSlideBar();
    },

    //滑动条-滑动改变
    slideChange(e) {
      
      var ratio = e.ratio;
      var endStr = math.getNumber(this.maxInvest) > math.getNumber(this.moneyNum) ? this.moneyNum : this.maxInvest;
      if (math.getNumber(endStr) == 0) {
        this.investCoinnNum = '0';
        return;
      }

      //保留位数
      var xiaoshu = this.getXiaoshu();
      this.investCoinnNum = math.cheng(endStr, ratio, xiaoshu, 2);
    },

    /********************************** 点击触发*/
    //加仓
    addClick(){
      

      if (this.investCoinnNum.length == 0) {
        modal.toast(T("请输入加仓数量"));
        return;
      }

      if (math.getNumber(this.investCoinnNum) == 0) {
        modal.toast(T("加仓数量不可为0"));
        return;
      }
      
      if (math.getNumber(this.investCoinnNum) < math.getNumber(this.minInvest)) {
        modal.toast(T("加仓数量不可低于") + this.minInvest + this.pairMap.investCoin);
        return;
      }
      
      if (math.getNumber(this.investCoinnNum) > math.getNumber(this.maxInvest)) {
        modal.toast(T("加仓数量不可高于") + this.maxInvest + this.pairMap.investCoin);
        return;
      }
      
      if (math.getNumber(this.investCoinnNum) > math.getNumber(this.moneyNum)) {
        modal.toast(T("可用余额不足"));
        return;
      }

      var investCoinnNum = math.jia(this.investCoinnNum, this.pairMap.investCoinnNum);
      var param = {'executeId':this.executeId, 
                    'executeConfig':this.configMap, 
                    'states':this.states,
                    'sonExexuteIds':this.sonExexuteIds,
                    'investCoinnNum':investCoinnNum}
      amStrategy2.addInvests(param, ()=>{
          modal.toast(T('加仓成功'));
          broadcast.send(broadcast.EXECUTE_UPDATE);
          navigator.back();
      });
    },
  }
};

</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.title{
  width: 750px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}

.invest {
  width: 670px;
  margin-left: 40px;
}

.slide{
  width: 670px;
  height:160px;
  margin-top: 10px;
  margin-left: 40px;
}

.money{
  width: 670px;
  margin-left: 40px;
  text-align: right;
}

.but{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 670px;
  height: 80px;
  border-radius: 4px;

  margin-top: 28px;
  margin-left: 40;
}

.heigth40{
  height: 40px;
}
</style>
